<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通过变量控制元素的显示和隐藏</title>
</head>

<body>
    <div id="change" class="change">
        <h1 data-show="status" style="background-color: red">Hello, World!</h1>
        <h1 data-show="status" style="background-color: green">Hello, World!</h1>
    </div>

    <script>
        let status = true
        let content = "<h1>Hello, World!</h1>"
        let elements = document.querySelectorAll("#change > h1")
        console.log(elements);


        for (let index = 0; index < elements.length; index++) {
            let element = elements[index];

            // 获取属性的值
            let attribueValue = element.getAttribute("data-show")
            console.log(typeof(attribueValue));
            
            if (eval(attribueValue) == true) {
                // 
            }
            else{
                // 隐藏该元素
                // 通过修改内联样式指定不显示
                element.style.display = "none"
                // 添加一个类
                // element.className = "abc"
            }
        }
    </script>
</body>

</html>